<template>
	<view class="page">
		<customNavBar1 title="填写订单" style='color: #111 !important;'></customNavBar1>
		<view class="hander-one" :style="{'padding-top':mt+'px'}">
			<view>
				<view class="info">
					<view class="i_date">
						<view class="id_type idt_go" v-if="goback">去</view>
						<text>{{cfDate}}</text>
						<text>{{cfWeek}}</text>
						<text>{{item.sailTime}}</text>
						<text v-if="!goback">出发</text>
						<view class="id_time" v-if="item.timeMemosStr">
							<image src="https://i.ringzle.com/file/20240408/42f02f487e094f42b93e310806feb416.png">
							</image>
							{{item.timeMemosStr}}
						</view>
					</view>
					<view class="i_address">
						<text>{{item.startPortName}}</text>
						<text>-</text>
						<text>{{item.endPortName}}</text>
					</view>
					<view class="i_ship">
						<view>{{item.lineNum+''+item.sx}}次</view>
						<view>{{item.clxm}}</view>
						<view>{{carShow?'':item.cangInfo.className||''}}</view>
					</view>
					<view class="i_line"></view>
					<view class="i_memo">
						<view class="im_left">
							<view class="iml_box">票价</view>
							<view class="iml_text" v-if="!carShow">
								¥{{item.cangInfo.totalPrice||''}}/成人，¥{{item.cangInfo.halfPrice||''}}/儿童
							</view>
							<view class="iml_text" v-else>
								<text>¥{{item.carInfo.totalPrice}}/{{item.carInfo.className}}</text>
								<text
									v-if="item.cangInfo">，¥{{item.cangInfo.totalPrice||''}}/{{item.cangInfo.className||''}}</text>
							</view>
						</view>
						<view class="im_right" @tap="toInstructions">
							<image class="imr_img1" src="@/static/index/steamerTicket/icon_explain_yellow.png"
								mode="">
							</image>
							<text>取退改票说明</text>
							<image class="imr_img2" src="@/static/index/steamerTicket/icon_yjt_yellow.png" mode="">
							</image>
						</view>
					</view>
				</view>
				<view class="info info_back" v-if="goback">
					<view class="i_date">
						<view class="id_type idt_back">返</view>
						<text>{{backItem.fhDate}}</text>
						<text>{{backItem.fhWeek}}</text>
						<text>{{backItem.sailTime}}</text>
						<view class="id_time" v-if="backItem.timeMemosStr">
							<image src="https://i.ringzle.com/file/20240408/42f02f487e094f42b93e310806feb416.png">
							</image>
							{{backItem.timeMemosStr}}
						</view>
					</view>
					<view class="i_address">
						<text>{{backItem.startPortName}}</text>
						<text>-</text>
						<text>{{backItem.endPortName}}</text>
					</view>
					<view class="i_ship">
						<view>{{backItem.lineNum+''+backItem.sx}}次</view>
						<view>{{backItem.clxm}}</view>
						<view>{{carShow?'':backItem.cangInfo.className||''}}</view>
					</view>
					<view class="i_line"></view>
					<view class="i_memo">
						<view class="im_left">
							<view class="iml_box">票价</view>
							<view class="iml_text" v-if="!carShow">
								¥{{backItem.cangInfo.totalPrice||''}}/成人，¥{{backItem.cangInfo.halfPrice||''}}/儿童
							</view>
							<view class="iml_text" v-else>
								<text>¥{{backItem.carInfo.totalPrice}}/{{backItem.carInfo.className}}</text>
								<text
									v-if="backItem.cangInfo">，¥{{backItem.cangInfo.totalPrice||''}}/{{backItem.cangInfo.className||''}}</text>
							</view>
						</view>
						<view class="im_right" @tap="toInstructions">
							<image class="imr_img1" src="@/static/index/steamerTicket/icon_explain_yellow.png"
								mode="">
							</image>
							<text>取退改票说明</text>
							<image class="imr_img2" src="@/static/index/steamerTicket/icon_yjt_yellow.png" mode="">
							</image>
						</view>
					</view>
				</view>
				<view class="notice_info">
					<u-icon name="info-circle" color="#FEA400" size="32rpx"></u-icon>
					<text>免票儿童也须购票。每一成人旅客可免费携带(未满6周岁或身高1.2米以下)的儿童2人，请您在购票的同时登记携童实名信息。超过2人时，应按超过的人数购买半价票。</text>
				</view>
				<view class="" style="background-color: #F5F8FA; padding: 20rpx 24rpx;">
					<view class="passenger" v-if="carShow&&!goback">
						<text>添加车辆</text>
						<view class="p_add" @tap="addCars">
							<image src="@/static/index/steamerTicket/icon_add.jpg" mode=""></image>
							<text>添加车辆</text>
						</view>
						<view class="passengers">
							<view v-for="(item,index) in passengerCarList" :key="index">
								<image class="p_del" src="@/static/index/steamerTicket/icon_delete.jpg"
									@tap="delPassengerCar(index)"></image>
								<view class="p_info">
									<view class="pi_top">
										<view class="name">
											<text>{{item.nameCopy}}</text>
											<view>{{item.type}}</view>
											<view>{{item.cartype}}</view>
										</view>
										<image src="@/static/my/commonInformation/icon_edit.png"
											@tap="editCar(item,index)">
										</image>
									</view>
									<view class="pi_idcard">
										车牌号<span>{{item.carno}}</span>
									</view>
									<view class="pi_idcard">
										{{cardCfg[item.cardType]}}<span>{{item.idcardCopy}}</span>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="passenger">
						<view class="p_title">
							<text>{{carShow?'添加同乘人':'添加乘客'}}</text>
							<span>最多可添加{{personLimit}}人</span>
						</view>
						<view class="p_add" @tap="toAddPassenger">
							<image src="https://i.ringzle.com/file/20240415/5f00b972fc0e4e3da82e16f726cb2468.png"></image>
							<text>添加乘客</text>
						</view>
						<view class="passengers">
							<view class="p_item_new" v-for="(item,index) in passengerList" :key="index">
								<view class="pin_top">
									<image class="p_del" src="@/static/index/steamerTicket/icon_delete.jpg"
										@tap="delPassenger(item,index)"></image>
									<view class="pint_right">
										<view class="pintr_info">
											<text class="name">{{item.passengerNameCopy}}</text>
											<text class="card">{{cardCfg[item.cardType]}} {{item.cardCopy}}</text>
											<view class="type">{{typeCfg[item.personType]||''}}</view>
										</view>
										<view class="pintr_add" v-if="item.personType==1">
											<text>携带免票儿童：{{(item.mpChildList&&item.mpChildList.length)||0}}</text>
											<view class="add" @tap="addMpChild(item,index)"><span>+</span><text>添加</text></view>
										</view>
									</view>
								</view>
								<view class="pin_childs" v-if="item.mpChildList&&item.mpChildList.length>0">
									<view class="pc_item" v-for="(mpc,idx) in item.mpChildList" :key="idx">
										<text class="title">携童{{idx+1}}</text>
										<text class="name">{{mpc.nameCopy}}</text>
										<text class="card">{{cardCfg[mpc.cardType]}} {{mpc.cardCopy}}</text>
										<view class="type">{{typeCfg[mpc.personType]||''}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="" style="padding-bottom: 100rpx;">
						<view class="contacts">
							<view class="c_info" v-if="!carShow">
								<text>联系人信息</text>
								<view class="ci_inp mt48">
									<text>姓名</text>
									<input type="text" v-model="name" @blur="setName" @confirm="setName"
										placeholder="请填写姓名">
								</view>
								<view class="ci_line"></view>
								<view class="ci_inp">
									<text>手机号</text>
									<view class="" style="display: flex; align-items: center;">
										<input type="phone" v-model="phone" @blur="setPhone" @confirm="setPhone"
											placeholder="请填写手机号">
										<image @click="delSetPhone"
											src="https://i.ringzle.com/file/20240220/5a3ab97d7ea647088be633d307b49dd4.png"
											mode=""></image>
									</view>
								</view>
							</view>
							<view class="c_info" v-else>
								<view class="ci_inp">
									<text>手机号</text>
									<view class="" style="display: flex; align-items: center;">
										<input type="phone" v-model="phone" @blur="setPhone" @confirm="setPhone"
											placeholder="请填写手机号">
										<image @click="delSetPhone"
											src="https://i.ringzle.com/file/20240220/5a3ab97d7ea647088be633d307b49dd4.png"
											mode=""></image>
									</view>
								</view>
							</view>
							<view class="cellBox2" @click="couponList">
								<view class="cellBox-left">
									<text slot="icon" class="icon">券</text>
									<view slot="title" class="title">
										<text>优惠券</text>
									</view>
								</view>
								<view class="cellBox-right">
									<view class="cellBox-text">
										<text v-if="coupon.length==0">暂未选择优惠券</text>
										<text v-else>{{coupon.name}}</text>
									</view>
									<view class="image">
										<image src="https://i.ringzle.com/file/20240123/3cf0f794b73d4cf691371408fbd3b5e3.png"
											mode="aspectFill">
										</image>
									</view>
								</view>
							</view>
						</view>
						<view class="agree">
							<image src="https://i.ringzle.com/file/20231027/db588133d67548fc82dfb0d128eac9a8.png"
								v-if="!agree" @tap="agree=!agree">
							</image>
							<image src="https://i.ringzle.com/file/20240227/9f378e2e344242c6837c5c35dd2c0ec5.png" v-else
								@tap="agree=!agree"></image>
							<text>我已阅读并同意船票</text>
							<text @tap="showXy">预订协议</text>
						</view>
					</view>
					<view class="bottom">
						<view class="b_left">
							<text>{{goback?'往返总价':'待支付'}}</text>
							<view>￥
								<span v-if="coupon.length==0">{{Math.round(price*100)/100}}</span>
								<span v-else-if="coupon.length!=0 && price > coupon.price">{{Math.round((price - coupon.price)*100)/100}}</span>
								<span v-else>0.01</span>
							</view>
						</view>
						<view class="b_right">
							<view class="br_left" @tap="showTicketMx">
								<text>明细</text>
								<image src="@/static/index/steamerTicket/icon_xjt.jpg" mode=""></image>
							</view>
							<view class="br_right" @tap="createOrder">
								{{goback?'订票':'立即预订'}}
							</view>
						</view>
					</view>
				</view>
				<!-- 费用明细 -->
				<u-popup :show="detailsShow" @close="detailsShow=false">
					<view class="details">
						<view class="title">
							<text>费用明细</text>
							<image src="@/static/index/steamerTicket/icon_close.png" @tap="detailsShow=false">
							</image>
						</view>
						<view v-if="!goback">
							<view class="address">{{item.startPortName}}-{{item.endPortName}}</view>
							<view class="tickets" v-for="(item,index) in mxList" :key="index"
								v-if="mxList.length>0&&item.num>0">
								<text>{{item.type}}</text>
								<view>￥{{item.price}}<span>X{{item.num}}</span></view>
							</view>
							<view class="tickets" v-if="mpTicketNum">
								<text>免票儿童</text>
								<view>￥0<span>X{{mpTicketNum}}</span></view>
							</view>
							<view class="tickets" v-if="carShow&&passengerCarList.length>0">
								<text>车票</text>
								<view>￥{{item.carInfo.totalPrice}}<span>X{{passengerCarList.length}}</span></view>
							</view>
							<view class="tickets" v-if="coupon.length!=0">
								<text>优惠券抵扣</text>
								<view>￥-{{coupon.price}}</view>
							</view>
							<view class="total">
								<text>合计</text>
								<view>￥
									<span v-if="coupon.length==0">{{Math.round(price*100)/100}}</span>
									<span v-else-if="coupon.length!=0 && price > coupon.price">{{Math.round((price - coupon.price)*100)/100}}</span>
									<span v-else>0.01</span>
								</view>
							</view>
						</view>
						<view class="d_middle" v-else>
							<view v-for="(item,index) in backMxList" :key="index" v-if="item.num">
								<text>{{item.type}}：{{item.from}} - {{item.to}} - {{item.ticket}}</text>
								<view>￥{{item.price}}<span>X{{item.num}}</span></view>
							</view>
						</view>
						<view class="bottom">
							<view class="b_left">
								<text>{{goback?'往返总价':'待支付'}}</text>
								<view>￥
									<span v-if="coupon.length==0">{{Math.round(price*100)/100}}</span>
									<span v-else-if="coupon.length!=0 && price > coupon.price">{{Math.round((price - coupon.price)*100)/100}}</span>
									<span v-else>0.01</span>
								</view>
							</view>
							<view class="b_right">
								<view class="br_left" @tap="detailsShow=false">
									<text>明细</text>
									<image src="@/static/index/steamerTicket/icon_xjt.jpg" mode=""></image>
								</view>
								<view class="br_right" @tap="createOrder">
									{{goback?'提交订单':'立即预订'}}
								</view>
							</view>
						</view>
					</view>
				</u-popup>
				<!-- 微信支付 -->
				<WechatPay ref="wxPay" @confirmPay="toPay" @cancelPay="cancelPay"></WechatPay>
				<!-- 添加/选择乘客 -->
				<u-popup :show="addShow" @close="addShow=false;sureFree=false">
					<view class="details">
						<view class="title">
							<text>乘客信息</text>
							<image src="@/static/index/steamerTicket/icon_close.png" @tap="addShow=false;sureFree=false"></image>
						</view>
						<view class="has_info">
							<view class="add_user" @tap="addPerson">
								<image src="https://i.ringzle.com/file/20240415/5f00b972fc0e4e3da82e16f726cb2468.png"
									mode="">
								</image>
								<text>新增</text>
							</view>
							<view class="add_list" v-if="addList.length>0">
								<u-swipe-action>
									<u-swipe-action-item :options="options" v-for="(item, index) in addList"
										:key="index" @click="deletePerson(item)" :ref="'swipeAction' + index"
										v-if="item.passengerName">
										<view class="swipe-action u-border-top u-border-bottom">
											<view class="swipe-action__content">
												<view class="sac_item">
													<image class="chk" @tap="selectPerson(index,item)"
														:src="item.isSelect?'https://i.ringzle.com/file/20240318/914f08290ea9411c902c294151d74b71.png':'https://i.ringzle.com/file/20231027/db588133d67548fc82dfb0d128eac9a8.png'">
													</image>
													<view class="si_info">
														<view class="name">
															<view>{{item.passengerNameCopy}}</view>
															<view>{{typeCfg[item.personType]}}</view>
														</view>
														<view class="idcard">
															<text>{{cardCfg[item.cardType]}}</text>
															<text>{{item.cardCopy}}</text>
														</view>
													</view>
													<image class="edit"
														src="@/static/my/commonInformation/icon_edit.png"
														@tap="toEdit(item)"></image>
												</view>
											</view>
										</view>
									</u-swipe-action-item>
								</u-swipe-action>
							</view>
						</view>
						<view class="add_submit" @tap="confirmAdd">确定</view>
					</view>
				</u-popup>
				<!-- 授权手机登录 -->
				<GetPhoneNumber ref="phoneNumber" @loginSuccess="loginSuccess"></GetPhoneNumber>
				<!-- 非本地人公共舱不足提示 -->
				<view class="local_box" v-if="localShow" :style="{'height':(h+90)+'px'}">
					<view class="lb_content">
						<view class="lbc_tip">该舱位公共舱座位已售罄，若您非本地居民，请选择其他舱位或航班。</view>
						<view class="lbc_btn" @tap="confirmTip">确定</view>
						<image src="https://i.ringzle.com/file/20240429/1876883b5065422a9d5b96518f421ed8.png"></image>
					</view>
				</view>
				<!-- 预订时免票儿童提示 -->
				<view class="local_box" v-if="mpTipShow" :style="{'height':(h+90)+'px'}">
					<view class="lb_content">
						<view class="lbc_tip">免票儿童需购买<span style="font-weight: bolder;">0元票</span>，请确认是否已添加出行儿童信息，以免耽误行程。</view>
						<view class="lbc_btns">
							<view class="lb_qx" @tap="toAddFreeChild">去添加</view>
							<view class="lb_qd" @tap="confirmMpAdd">不添加</view>
						</view>
						<image src="https://i.ringzle.com/file/20240429/1876883b5065422a9d5b96518f421ed8.png"></image>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import customNavBar1 from '@/compoments/uNavBar1/index2.vue'
	import WechatPay from '@/compoments/wechatPay/index.vue'
	import GetPhoneNumber from '@/compoments/Getphonenumber/index.vue'
	export default {
		name: 'passengerPay',
		components: {
			GetPhoneNumber,
			WechatPay,
			customNavBar1
		},
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight - 66,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				item: '',
				backItem: '',
				name: '',
				phone: '',
				agree: false,
				show: false,
				price: 0,
				detailsShow: false,
				passengerList: [],
				passengerCarList: [],
				addShow: false,
				addList: [],
				typeCfg: {
					1: '成人票',
					2: '儿童票',
					3: '免票儿童',
					4: '老人票'
				},
				cardCfg: this.$uct.typeToText,
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}],
				carShow: false,
				goback: false,
				cfDate: '',
				cfWeek: '',
				weeks: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
				lsKey: '',
				mxList: [],
				backMxList: [],
				orderId: '',
				localShow: false,
				mpChild:false,//查询乘客信息时是否查免票儿童的数据
				mpIndex:'',
				personLimit:10,//最多可添加乘客的数量
				mpTipShow:false,
				mpTicketNum:'',//免票儿童票数量
				sureFree:false,
				coupon:[]
			}
		},
		onLoad(option) {
			if (option.item) {
				this.item = JSON.parse(option.item);
				this.cfDate = new Date(this.item.sailDate).Format('MM月dd日');
				this.cfWeek = this.weeks[new Date(this.item.sailDate).getDay()];
			}
			if (option.backItem) {
				this.goback = true;
				this.backItem = JSON.parse(option.backItem);
				this.backItem.fhDate = new Date(this.backItem.sailDate).Format('MM月dd日');
				this.backItem.fhWeek = this.weeks[new Date(this.backItem.sailDate).getDay()];
			}
			//获取乘客
			this.getPassengers();
		},
		onReady() {
			if (uni.getStorageSync('shipType') && uni.getStorageSync('shipType') == 2) this.carShow = true;
			else this.carShow = false;

			if (uni.getStorageSync('userInfo')) {
				this.name = JSON.parse(uni.getStorageSync('userInfo')).realName;
				this.phone = JSON.parse(uni.getStorageSync('userInfo')).mobile;
			}
		},
		onShow(){
			this.getPassengers();
			let that = this
			uni.$on('updateData',function(data){
				console.log(data);
				if(data){
					that.coupon = data
				}else{
					that.coupon = []
				}
			})
		},
		methods: {
			couponList(){
				let price
				price = this.price
				uni.navigateTo({
				    url: `/pagesMy/coupon/useList?type=3&price=${price}`
				});
			},
			setName(e) {
				this.name = e.detail.value;
			},
			setPhone(e) {
				this.phone = e.detail.value;
			},
			// 清除号码 
			delSetPhone() {
				this.phone = ''
			},
			//获取乘客
			getPassengers() {
				this.lsKey = 'getPassenger';
				this.$login().then(res => {
					if (res === 0) this.toGetPassengers();
					else this.$refs['phoneNumber'].show = true;
				})
			},
			toGetPassengers(callback) {
				this.$api.get('/api/commonPerson/list', {
					openId: JSON.parse(uni.getStorageSync('userInfo')).openId
				}).then(res => {
					if (res.data.code === 0) {
						this.addList = this.$uct.setPersonType(res.data.data);
						if(this.mpChild) this.addList = this.addList.filter(l=>l.personType==3);
						else this.addList = this.addList.filter(l=>l.personType!=3);
						this.addList.forEach((d, i) => {
							d.passengerNameCopy = this.$aesTm.tuomin(d.passengerName,1);
							d.cardCopy = this.$aesTm.tuomin(d.card,3);
							this.$set(this.addList[i], 'isSelect', false);
						})
						callback && callback()
					} else this.$showModal(res.data.msg);
				})
			},
			showXy() {
				uni.navigateTo({
					url: '/pagesIndex/steamerTicket/ticketingInstructions'
				})
			},
			toPay() {
				this.lsKey = 'toPay';
				this.$login().then(res => {
					if (res === 0) return this.confrimPay();
					else this.$refs['phoneNumber'].show = true;
				})
			},
			//取消支付跳转对应订单详情页
			cancelPay(){
				let url = '/pagesMy/shipTicketOrder/details?orderId=' + this.orderId;
				if (this.goback) url = '/pagesMy/order/index?name=船票&type=1&typeIndex=0';
				uni.redirectTo({
					url
				})
			},
			confrimPay() {
				this.$api.post('/order/icbc/createOrder', { //下单
					orderCode: this.orderId,
					tradeType: 'JSAPI',
					openId: JSON.parse(uni.getStorageSync('userInfo')).openId
				}, false).then(res => {
					if (res.statusCode == 200 && res.data != null) {
						this.$refs.wxPay.payShow = false;
						this.$wxPay(res.data).then(result => {
							let url = '/pagesIndex/steamerTicket/payResult?price=' + this.price +
								'&orderId=' + this.orderId + '&endPortName=' + this.item.endPortName;
							if (this.goback) url += '&type=goback';
							uni.navigateTo({
								url
							});
						})
					}
				})
			},
			//登录成功后处理事件
			loginSuccess(res) {
				if (this.lsKey == 'getPassenger') this.toGetPassengers();
				if (this.lsKey == 'toPay') this.confrimPay();
				this.name = JSON.parse(uni.getStorageSync('userInfo')).realName;
				this.phone = JSON.parse(uni.getStorageSync('userInfo')).mobile;
			},
			delPassenger(item, index) {
				this.coupon = []
				this.passengerList.splice(index, 1);
				let itemPrice = 0;
				if (item.personType == 1) { //成人
					if (this.goback) { //往返
						if (item.discounts) itemPrice = this.item.cangInfo.localPrice + this.backItem.cangInfo
							.localPrice; //本地人
						else itemPrice = this.item.cangInfo.totalPrice + this.backItem.cangInfo.totalPrice;
					} else {
						if (item.discounts) itemPrice = this.item.cangInfo.localPrice || 0;
						else itemPrice = this.item.cangInfo.totalPrice || 0;
					}
				} else { //儿童
					if (this.goback) { //往返
						if (item.discounts) itemPrice = this.item.cangInfo.localHalfPrice + this.backItem.cangInfo
							.localHalfPrice; //本地人
						else itemPrice = this.item.cangInfo.halfPrice + this.backItem.cangInfo.halfPrice;
					} else {
						if (item.discounts) itemPrice = this.item.cangInfo.localHalfPrice || 0;
						else itemPrice = this.item.cangInfo.halfPrice || 0;
					}
				}
				this.price -= itemPrice;
				if (!this.goback) {
					if (this.mxList.length > 0) {
						if (item.personType == 1 && !item.discounts) this.mxList[0].num--;
						if (item.personType == 1 && item.discounts) this.mxList[1].num--;
						if (item.personType == 2 && !item.discounts) this.mxList[2].num--;
						if (item.personType == 2 && item.discounts) this.mxList[3].num--;
					}
				} else {
					if (this.backMxList.length > 0) {
						if (item.personType == 1 && !item.discounts) {
							this.backMxList[0].num--;
							this.backMxList[4].num--;
						}
						if (item.personType == 1 && item.discounts) {
							this.backMxList[1].num--;
							this.backMxList[5].num--;
						}
						if (item.personType == 2 && !item.discounts) {
							this.backMxList[2].num--;
							this.backMxList[6].num--;
						}
						if (item.personType == 2 && item.discounts) {
							this.backMxList[3].num--;
							this.backMxList[7].num--;
						}
					}
				}

				if (this.price == 0) {
					this.mxList = [];
					if (this.goback) this.backMxList = [];
				}
			},
			delPassengerCar(index) {
				this.coupon = []
				this.passengerCarList.splice(index, 1);
				this.price -= this.item.carInfo.totalPrice;
			},
			addPerson() {
				this.$login().then(res => {
					if (res === 0) {
						uni.navigateTo({
							url: '/pagesMy/commonInformation/add?type=ship',
							events: {
								addPassengerSuccess: data => {
									this.toGetPassengers();
								}
							}
						})
					} else this.$refs['phoneNumber'].show = true;
				})
			},
			addCars() {
				this.$login().then(res => {
					if (res === 0) {
						let selectInfo = {
							passengers: this.passengerList,
							passengerCars: this.passengerCarList
						};
						uni.navigateTo({
							url: '/pagesIndex/steamerTicket/addCar?selectInfo=' + JSON.stringify(
								selectInfo),
							events: {
								addDriverSuccess: data => {
									if (this.item.carInfo) data.cartype = this.item.carInfo.className;
									this.passengerCarList = [...this.passengerCarList, data];
									this.passengerCarList.forEach(d=>{
										d.nameCopy = this.$aesTm.tuomin(d.name,1);
										d.idcardCopy = this.$aesTm.tuomin(d.idcard,3);
									})
									this.price += this.item.carInfo.totalPrice;
								}
							}
						})
					} else this.$refs['phoneNumber'].show = true;
				})
			},
			editCar(item, index) {
				uni.navigateTo({
					url: '/pagesIndex/steamerTicket/addCar?item=' + JSON.stringify(item),
					events: {
						addDriverSuccess: data => {
							if (this.item.carInfo) data.cartype = this.item.carInfo.className;
							this.$set(this.passengerCarList, index, data);
						}
					}
				})
			},
			//选择乘客
			selectPerson(index, item) {
				if(this.mpChild){
					if(item.mpSelected) return this.uToastShow('该免票儿童已添加');
					else{
						this.$set(this.addList[index], 'isSelect', !this.addList[index].isSelect);
						if(this.sureFree) return;
						let sLen = this.addList.filter(a=>a.isSelect).length;
						if(item.isSelect&&sLen>2){
							return this.uToastShow('每一成人旅客可免费携带(未满6周岁或身高1.2米以下)的儿童2人，超过2人时，应按超过的人数购买半价票。')
						}
					}
					return
				}
				
				let newCard = JSON.parse(JSON.stringify(item.card));
				this.$api.post('/travel/ship/ticket/passager/iolocal', {
					credentialType: item.cardType,
					credentialNum: this.$aesTm.encrypt(newCard)
				}).then(res => {
					if (res.data.code === 0) {
						if (res.data.data == 0) { //非本地人
							if ((!this.goback && this.item.cangInfo.pubCurrentCount == 0) ||
								(this.goback && (this.item.cangInfo.pubCurrentCount == 0 || this.backItem.cangInfo
									.pubCurrentCount == 0))) {
								this.addShow = false;
								this.localShow = true;
							} else {
								if (item.isDriver) return this.$showToast('该乘客已成为司机，不可选择');
								this.$set(this.addList[index], 'isSelect', !this.addList[index].isSelect);
							}
						} else {
							if (item.isDriver) return this.$showToast('该乘客已成为司机，不可选择');
							this.$set(this.addList[index], 'isSelect', !this.addList[index].isSelect);
						}
					} else this.$showModal(res.data.msg);
				})
			},
			toEdit(item) {
				uni.navigateTo({
					url: '/pagesMy/commonInformation/add?type=ship&item=' + JSON.stringify(item),
					events: {
						editPassengerSuccess: data => {
							this.toGetPassengers();
						}
					}
				})
			},
			deletePerson(item) {
				this.$api.del('/api/commonPerson', [item.id]).then(res => {
					if (res.data.code === 0) {
						this.addList.forEach((d, i) => {
							this.$refs['swipeAction' + i][0].closeHandler();
						})
						this.toGetPassengers();
						let fidx = this.passengerList.findIndex(d => d.id == item.id);
						if (fidx > -1) this.passengerList.splice(fidx, 1);
					} else this.$showModal(res.data.msg)
				})
			},
			async confirmAdd() {
				this.coupon = []
				if(this.sureFree){
					let pnum = this.passengerList.length;
					let crnum = this.passengerList.filter(p=>p.personType!=2).length;
					let temp = this.addList.filter(d => d.isSelect == true);
					if(temp.length == 0) return this.$showToast('请至少添加一名免票儿童');
					if(temp.length>crnum*2) return this.$showToast('每一成人旅客最多可携带两位免票儿童');
					if((pnum+temp.length)>this.personLimit) return this.$showToast('最多可添加'+this.personLimit+'名乘客');
					
					let ii = 0;
					let promise = this.passengerList.map(async (d,i)=>{
						d.passengerNameCopy = this.$aesTm.tuomin(d.passengerName,1);
						d.cardCopy = this.$aesTm.tuomin(d.card,3);
						this.$set(this.passengerList[i], 'childs', 0);
						if(d.personType!=2){
							let temp2 = JSON.parse(JSON.stringify(temp));
							let mcList = temp2.splice(ii*2,2);
							mcList.forEach((d, i) => {
								d.nameCopy = this.$aesTm.tuomin(d.passengerName,1);
								d.cardCopy = this.$aesTm.tuomin(d.card,3);
							})
							this.$set(this.passengerList[i], 'mpChildList', mcList);
							ii++;
						}
						
						let newCard = JSON.parse(JSON.stringify(d.card));
						await this.getPassagerIolocal(d.cardType,newCard,i)
					})
					await Promise.all(promise);
					this.dealTotalPrice();
					this.name = this.passengerList[0].passengerName;
					this.phone = JSON.parse(uni.getStorageSync('userInfo')).mobile;
					this.addShow = false;
					this.sureFree = false;
					return;
				}
				
				if(!this.mpChild){
					let temp = this.addList.filter(d => d.isSelect == true);
					if(temp.length==0) this.passengerList = [];
					else{
						let clone = JSON.parse(JSON.stringify(this.passengerList));
						this.passengerList = new Array(temp.length);
						temp.forEach((t,i)=>{
							let _t = clone.find(c=>c.card==t.card);
							if(_t) this.passengerList[i] = _t;
							else this.passengerList[i] = t;
						})
					}
					
					if (this.passengerList.length == 0) return this.$showToast('请至少添加一名乘客');
					let pcount = this.passengerList.length;
					let ccount = 0;
					this.passengerList.forEach(p=>ccount+=(p.mpChildList?p.mpChildList.length:0));
					if(pcount+ccount>this.personLimit) return this.$showToast('最多可添加'+this.personLimit+'名乘客');
					
					let promise = this.passengerList.map(async (d,i)=>{
						d.passengerNameCopy = this.$aesTm.tuomin(d.passengerName,1);
						d.cardCopy = this.$aesTm.tuomin(d.card,3);
						this.$set(this.passengerList[i], 'childs', 0);
						if(!this.passengerList[i].mpChildList||this.passengerList[i].mpChildList.length==0){
							this.$set(this.passengerList[i], 'mpChildList', []);
						}
						let newCard = JSON.parse(JSON.stringify(d.card));
						await this.getPassagerIolocal(d.cardType,newCard,i)
					})
					await Promise.all(promise);
					this.dealTotalPrice();
					this.name = this.passengerList[0].passengerName;
					this.phone = JSON.parse(uni.getStorageSync('userInfo')).mobile;
					this.addShow = false;
				}else{
					let list = this.addList.filter(d => d.isSelect == true);
					let pcount = this.passengerList.length;
					let ccount = 0;
					this.passengerList.forEach(p=>ccount+=p.mpChildList.length);
					let currentNum = this.passengerList[this.mpIndex].mpChildList.length;
					if(pcount+ccount+list.length-currentNum>this.personLimit) return this.$showToast('最多可添加'+this.personLimit+'名乘客');
					
					list.forEach((d, i) => {
						d.nameCopy = this.$aesTm.tuomin(d.passengerName,1);
						d.cardCopy = this.$aesTm.tuomin(d.card,3);
					})
					if(this.mpIndex!=='') this.$set(this.passengerList[this.mpIndex],'mpChildList',list);
					this.addShow = false;
				}
			},
			getPassagerIolocal(credentialType,newCard,i){
				return new Promise((resolve,reject)=>{
					this.$api.post('/travel/ship/ticket/passager/iolocal', {
						credentialType,
						credentialNum: this.$aesTm.encrypt(newCard)
					}).then(res => {
						if (res.data.code === 0) {
							this.$set(this.passengerList[i], 'discounts', parseInt(res.data.data || 0));
							resolve();
						} else this.$showModal(res.data.msg);
					})
				})
			},
			//计算总价
			dealTotalPrice() {
				this.price = this.carShow ? (this.passengerCarList.length > 0 ? this.item.carInfo.totalPrice * this
					.passengerCarList.length : 0) : 0;
				this.passengerList.forEach((d, i) => {
					if (d.personType == 1) {
						if (d.discounts && d.discounts == 1) { //优惠

						}
						this.price += (d.discounts ? (+this.item.cangInfo.localPrice || 0) : (+this.item.cangInfo
							.totalPrice || 0));
						if (this.goback) this.price += (d.discounts ? (+this.backItem.cangInfo.localPrice || 0) : (
							+this.backItem.cangInfo.totalPrice || 0));
					}
					if (d.personType == 2) {
						if (d.discounts && d.discounts == 1) { //优惠

						}
						this.price += (d.discounts ? (+this.item.cangInfo.localHalfPrice || 0) : (+this.item
							.cangInfo.halfPrice || 0));
						if (this.goback) this.price += (d.discounts ? (+this.backItem.cangInfo.localHalfPrice ||
							0) : (+this.backItem.cangInfo.halfPrice || 0));
					}
				})
				let cnum = this.passengerList.filter(d => d.personType == 1 && !d.discounts).length;
				let cnum_local = this.passengerList.filter(d => d.personType == 1 && d.discounts).length;
				let ernum = this.passengerList.filter(d => d.personType == 2 && !d.discounts).length;
				let ernum_local = this.passengerList.filter(d => d.personType == 2 && d.discounts).length;
				this.mxList = [{
						type: '成人票',
						price: this.item.cangInfo.totalPrice || 0,
						num: cnum
					}, {
						type: '成人票(本地)',
						price: this.item.cangInfo.localPrice || 0,
						num: cnum_local
					},
					{
						type: '儿童票',
						price: this.item.cangInfo.halfPrice || 0,
						num: ernum
					},
					{
						type: '儿童票(本地)',
						price: this.item.cangInfo.localHalfPrice || 0,
						num: ernum_local
					}
				];
				if (this.goback) {
					this.backMxList = [{
							type: '返程',
							from: this.backItem.startPortName,
							to: this.backItem.endPortName,
							ticket: '成人票',
							price: this.backItem.cangInfo.totalPrice,
							num: cnum
						},
						{
							type: '返程',
							from: this.backItem.startPortName,
							to: this.backItem.endPortName,
							ticket: '成人票(本地)',
							price: this.backItem.cangInfo.localPrice,
							num: cnum_local
						},
						{
							type: '返程',
							from: this.backItem.startPortName,
							to: this.backItem.endPortName,
							ticket: '儿童票',
							price: this.backItem.cangInfo.halfPrice,
							num: ernum
						},
						{
							type: '返程',
							from: this.backItem.startPortName,
							to: this.backItem.endPortName,
							ticket: '儿童票(本地)',
							price: this.backItem.cangInfo.localHalfPrice,
							num: ernum_local
						},
						{
							type: '去程',
							from: this.item.startPortName,
							to: this.item.endPortName,
							ticket: '成人票',
							price: this.item.cangInfo.totalPrice,
							num: cnum
						},
						{
							type: '去程',
							from: this.item.startPortName,
							to: this.item.endPortName,
							ticket: '成人票(本地)',
							price: this.item.cangInfo.localPrice,
							num: cnum_local
						},
						{
							type: '去程',
							from: this.item.startPortName,
							to: this.item.endPortName,
							ticket: '儿童票',
							price: this.item.cangInfo.halfPrice,
							num: ernum
						},
						{
							type: '去程',
							from: this.item.startPortName,
							to: this.item.endPortName,
							ticket: '儿童票(本地)',
							price: this.item.cangInfo.localHalfPrice,
							num: ernum_local
						}
					]
				}
			},
			createOrder() {
				if (this.carShow && this.passengerCarList.length === 0) return this.$showToast('请添加车辆');
				if (!this.carShow && this.passengerList.length === 0) return this.$showToast('请添加乘客');
				if (!this.carShow && !this.name) return this.$showToast('请填写联系人姓名');
				if (!this.$reg.mobile(this.phone)) return this.$showToast('请填写正确的联系人手机号');
				if (!this.agree) return this.$showToast('请选择预订协议');

				let exitMp = this.passengerList.find(p=>p.mpChildList.length>0);
				if(!exitMp) return this.mpTipShow = true;
				this.toCreateOrder();
			},
			toCreateOrder(){
				this.$login().then(res => {
					if (res === 0) {
						let params = JSON.parse(JSON.stringify(this.item));
						delete params.cangInfo;
						if (params.carInfo) delete params.carInfo;
						params.timeMemos = params.timeMemosStr||'';
						params.contactNum = this.phone;
						params.linkPerson = this.name;
						params.linkPhone = this.phone;
						params.sailDate = new Date(params.sailDate).Format('yyyy-MM-dd');
						let teTime = new Date().setMinutes(new Date().getMinutes() + 5);
						params.expireTime = new Date(teTime).Format('yyyy-MM-dd hh:mm:ss');
						params.foreOrderItemReqs = [];
						// params.totalFee = !this.goback?this.price:this.backMxList.reduce((cur,pre)=> cur+(pre.type=='去程'&&pre.num?pre.price*pre.num:0),0);
						params.totalFee = this.passengerList.length * this.item.cangInfo.totalPrice;
						params.totalPayFee = !this.goback ? this.price : this.backMxList.reduce((cur, pre) => cur +
							(pre.type == '去程' && pre.num ? pre.price * pre.num : 0), 0);
						params.openId = JSON.parse(uni.getStorageSync('userInfo')).openId;
						this.passengerList.forEach(d => {
							params.foreOrderItemReqs.push({
								"passName": d.passengerName,
								"priceType": d.personType,
								"credentialNum": d.card,
								"realFee": d.personType == 1 ? (d.discounts ? (this.item.cangInfo
									.localPrice || 0) : (this.item.cangInfo.totalPrice ||
									0)) : (d.discounts ? (this.item.cangInfo.localHalfPrice ||
									0) : (this.item.cangInfo.halfPrice || 0)),
								"passId": 193,
								"freeChildCount": d.childs,
								// "ticketFee": d.personType == 1 ? (d.discounts?(this.item.cangInfo.localPrice||0):(this.item.cangInfo.totalPrice||0)) : (d.discounts?(this.item.cangInfo.localHalfPrice||0):(this.item.cangInfo.halfPrice||0)),
								"ticketFee": this.item.cangInfo.totalPrice || 0,
								"seatClassName": this.item.cangInfo.className || '',
								"credentialType": d.cardType,
								"seatClass": this.item.cangInfo.classNum || '',
								// "isLocal": 0,
								"isLocal": d.discounts,
								"plateNum": "",
								"freeChildInfo":d.mpChildList.map(m=>{
									return {
										parentCredential:this.$aesTm.encrypt(d.card,3),
										childName:this.$aesTm.encrypt(m.passengerName,1),
										card:this.$aesTm.encrypt(m.card,3),
										type:m.cardType||1
									}
								}),
								"ticPrice":this.item.cangInfo.ticPrice||''
							})
						})
						if (this.carShow) {
							this.passengerCarList.forEach(d => {
								params.foreOrderItemReqs.push({
									"passName": d.name,
									"priceType": d.personType,
									"credentialNum": d.idcard,
									"realFee": this.item.carInfo.totalPrice,
									"passId": 193,
									"freeChildCount": d.childs,
									"ticketFee": this.item.carInfo.totalPrice,
									"seatClassName": this.item.carInfo.className,
									"credentialType": d.cardType,
									"seatClass": this.item.carInfo.classNum,
									// "isLocal": 0,
									"isLocal": d.discounts,
									"plateNum": d.carno,
									"ticPrice":this.item.carInfo.ticPrice||''
								})
							})
							params.totalFee += this.passengerCarList.length * this.item.carInfo.totalPrice;
						}
				
						// 往返下单
						let backParams = null;
						if (this.goback) {
							backParams = JSON.parse(JSON.stringify(this.backItem));
							delete backParams.cangInfo;
							backParams.timeMemos = backParams.timeMemosStr||'';
							backParams.contactNum = this.phone;
							backParams.linkPerson = this.name;
							backParams.linkPhone = this.phone;
							backParams.sailDate = new Date(backParams.sailDate).Format('yyyy-MM-dd');
							let teTime = new Date().setMinutes(new Date().getMinutes() + 5);
							backParams.expireTime = new Date(teTime).Format('yyyy-MM-dd hh:mm:ss');
							backParams.foreOrderItemReqs = [];
							// backParams.totalFee = this.backMxList.reduce((cur,pre)=> cur+(pre.type=='返程'&&pre.num?pre.price*pre.num:0),0);
							backParams.totalFee = this.passengerList.length * this.backItem.cangInfo.totalPrice;
							backParams.totalPayFee = this.backMxList.reduce((cur, pre) => cur + (pre.type ==
								'返程' && pre.num ? pre.price * pre.num : 0), 0);
							backParams.openId = JSON.parse(uni.getStorageSync('userInfo')).openId;
							this.passengerList.forEach(d => {
								backParams.foreOrderItemReqs.push({
									"passName": d.passengerName,
									"priceType": d.personType,
									"credentialNum": d.card,
									"realFee": d.personType == 1 ? (d.discounts ? (this.backItem
										.cangInfo.localPrice || 0) : (this.backItem
										.cangInfo.totalPrice || 0)) : (d.discounts ? (this
										.backItem.cangInfo.localHalfPrice || 0) : (this
										.backItem.cangInfo.halfPrice || 0)),
									"passId": 193,
									"freeChildCount": d.childs,
									// "ticketFee": d.personType == 1 ? (d.discounts?(this.backItem.cangInfo.localPrice||0):(this.backItem.cangInfo.totalPrice||0)) : (d.discounts?(this.backItem.cangInfo.localHalfPrice||0):(this.backItem.cangInfo.halfPrice||0)), 
									"ticketFee": this.backItem.cangInfo.totalPrice || 0,
									"seatClassName": this.backItem.cangInfo.className || '',
									"credentialType": d.cardType,
									"seatClass": this.backItem.cangInfo.classNum || '',
									"isLocal": d.discounts,
									"plateNum": "",
									"freeChildInfo":d.mpChildList.map(m=>{
										return {
											parentCredential:this.$aesTm.encrypt(d.card,3),
											childName:this.$aesTm.encrypt(m.passengerName,1),
											card:this.$aesTm.encrypt(m.card,3),
											type:m.cardType||1
										}
									}),
									"ticPrice":this.backItem.cangInfo.ticPrice||''
								})
							})
						}
				
						if (!this.goback) {
							let newParams = JSON.parse(JSON.stringify(params));
							newParams.contactNum = this.$aesTm.encrypt(newParams.contactNum);
							newParams.linkPerson = this.$aesTm.encrypt(newParams.linkPerson);
							newParams.linkPhone = this.$aesTm.encrypt(newParams.linkPhone);
							newParams.foreOrderItemReqs.forEach(d=>{
								d.credentialNum = this.$aesTm.encrypt(d.credentialNum);
								d.passName = this.$aesTm.encrypt(d.passName);
							})
							newParams.discountCouponUserId = this.coupon.id
							this.$api.post('/travel/api/ship/order/holding/save', newParams).then(res => {
								if (res.data.code === 0) {
									this.$refs.wxPay.payShow = true;
									this.orderId = res.data.data;
								} else this.$showModal(res.data.msg);
							})
						} else {
							let newParams = JSON.parse(JSON.stringify(params));
							newParams.contactNum = this.$aesTm.encrypt(newParams.contactNum);
							newParams.linkPerson = this.$aesTm.encrypt(newParams.linkPerson);
							newParams.linkPhone = this.$aesTm.encrypt(newParams.linkPhone);
							newParams.foreOrderItemReqs.forEach(d=>{
								d.credentialNum = this.$aesTm.encrypt(d.credentialNum);
								d.passName = this.$aesTm.encrypt(d.passName);
							})
							let newbackParams = JSON.parse(JSON.stringify(backParams));
							newbackParams.contactNum = this.$aesTm.encrypt(newbackParams.contactNum);
							newbackParams.linkPerson = this.$aesTm.encrypt(newbackParams.linkPerson);
							newbackParams.linkPhone = this.$aesTm.encrypt(newbackParams.linkPhone);
							newbackParams.foreOrderItemReqs.forEach(d=>{
								d.credentialNum = this.$aesTm.encrypt(d.credentialNum);
								d.passName = this.$aesTm.encrypt(d.passName);
							})
							newParams.discountCouponUserId = this.coupon.id
							this.$api.post('/api/shipReturn/api/shipReturn/order/holding/save', {
								tqorderDTOStart: newParams,
								tqorderDTOReturn: newbackParams,
								discountCouponUserId:this.coupon.id
							}).then(res => {
								if (res.data.code === 0) {
									this.$refs.wxPay.payShow = true;
									this.orderId = res.data.data;
								} else this.$showModal(res.data.msg);
							})
						}
					} else this.$refs['phoneNumber'].show = true;
				})
			},
			toAddPassenger() {
				this.toAddPassengerConfirm();
			},
			toAddPassengerConfirm() {
				this.addShow = true;
				this.mpChild = false;
				this.toGetPassengers(()=>{
					this.addList.forEach((d, i) => {
						if (this.passengerCarList.find(p => p.idcard == d.card)) this.$set(this.addList[i], 'isDriver',
							true);
						else this.$set(this.addList[i], 'isDriver', false);
					
						if (this.passengerList.find(p => p.card == d.card)) this.$set(this.addList[i], 'isSelect',
							true);
						else this.$set(this.addList[i], 'isSelect', false);
					})
				})
			},
			addMpChild(item,index){
				this.addShow = true;
				this.mpChild = true;
				this.mpIndex = index;
				this.toGetPassengers(()=>{
					let mpTemp = [];
					this.passengerList.forEach(p => {
						p.mpChildList.forEach(mp => {
							if (!item.mpChildList.find(imp => imp.card == mp.card)) mpTemp.push(mp)
						})
					})
					
					this.addList.forEach((d, i) => {
						if (item.mpChildList.find(p => p.card == d.card)) this.$set(this.addList[i], 'isSelect', true);
						else this.$set(this.addList[i], 'isSelect', false);
						
						if (mpTemp.find(p => p.card == d.card)) this.$set(this.addList[i], 'mpSelected', true);
						else this.$set(this.addList[i], 'mpSelected', false);
					})
				})
			},
			//取退改票说明
			toInstructions() {
				uni.navigateTo({
					url: '/pagesIndex/steamerTicket/ticketingInstructions?title=取票、退票、改签说明'
				})
			},
			confirmTip() {
				this.localShow = false;
				uni.navigateBack();
			},
			toAddFreeChild(){
				this.mpTipShow = false;
				this.sureFree = true;
				this.addShow = true;
				this.mpChild = true;
				this.toGetPassengers();
			},
			confirmMpAdd(){
				this.mpTipShow = false;
				this.toCreateOrder();
			},
			showTicketMx(){
				this.detailsShow = true;
				this.mpTicketNum = this.passengerList.reduce((cur,pre)=>cur+pre.mpChildList.length,0);
				if(this.goback){
					this.backMxList.push({
						type: '返程',
						from: this.backItem.startPortName,
						to: this.backItem.endPortName,
						ticket: '免票儿童',
						price: 0,
						num: this.mpTicketNum
					})
					this.backMxList.push({
						type: '去程',
						from: this.item.startPortName,
						to: this.item.endPortName,
						ticket: '免票儿童',
						price: 0,
						num: this.mpTicketNum
					})
				}
			},
			uToastShow(message){
				this.$refs.uToast.show({message})
			}
		}
	}
</script>

<style scoped lang="less">
	::v-deep .u-toast{
		position: relative;
		z-index: 10099;
	}
	
	.page {
		height: 100%;
		background: #F5F8FA;
		// padding: 20rpx 24rpx 120rpx;
		.cellBox2 {
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 16rpx;
			// padding: 12rpx;
			margin: 24rpx 0;
			padding: 35rpx 30rpx;
			display: flex;
			justify-content: space-between;
		
			.cellBox-left {
				display: flex;
				align-items: center;
		
				.icon {
					border-radius: 6rpx;
					background-color: #ff4141;
					width: 30rpx;
					height: 30rpx;
					color: #fff;
					font-size: 20rpx;
					text-align: center;
					line-height: 30rpx;
					margin-right: 10rpx;
				}
		
				.title {
					color: #666666;
					font-size: 30rpx;
					font-weight: Regular;
					// margin-left: 260rpx;
				}
			}
		
			.cellBox-right {
				display: flex;
				width: 70%;
				justify-content: space-between;
				align-items: center;
		
				.cellBox-text {
					color: #aaaaaa;
					font-size: 28rpx;
					// margin-left: 260rpx;
				}
		
				.image {
					width: 24rpx;
					height: 24rpx;
		
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.hander-one {
			background-image: url('https://i.ringzle.com/file/20240129/323bce42369f4d228d5653b8a4249095.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			height: 468rpx;
			box-sizing: border-box;
		}

		.info {
			box-sizing: border-box;
			padding: 35rpx 24rpx;
			// background: linear-gradient(to right, #3092E0, #45B7DE);
			background-color: #007A69;
			border-radius: 16rpx;
			margin: 20rpx 24rpx;

			&.info_back {
				background-color: #35A091;
			}

			.i_date {
				display: flex;
				align-items: center;
				position: relative;

				.id_type {
					width: 36rpx;
					height: 36rpx;
					border-radius: 6rpx;
					line-height: 36rpx;
					text-align: center;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					margin-right: 20rpx;

					&.idt_go {
						background: #EDF8FD;
						color: #007A69;
					}

					&.idt_back {
						background: #FFEDED;
						color: #FF4141;
					}
				}

				.id_time {
					display: flex;
					align-items: center;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #FFFFFF;
					line-height: 26rpx;
					position: absolute;
					right: 0;
					top: 50%;
					margin-top: -13rpx;

					image {
						width: 26rpx;
						height: 26rpx;
						margin-right: 10rpx;
					}
				}

				text {
					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					margin-right: 20rpx;
				}
			}

			.i_address {
				display: flex;
				align-items: center;
				margin: 25rpx 0 30rpx;

				text {
					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;

					&:nth-child(2) {
						margin: 0 20rpx;
					}
				}
			}

			.i_ship {
				display: flex;
				align-items: center;

				&>view {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #B2D7D2;

					&:nth-child(2) {
						margin: 0 15rpx;
						padding: 0 15rpx;
						border-left: 1rpx solid rgba(255, 255, 255, .2);
						border-right: 1rpx solid rgba(255, 255, 255, .2)
					}
				}
			}

			.i_line {
				height: 1rpx;
				opacity: 0.2;
				border: 1rpx solid #FFFFFF;
				margin: 36rpx 0 29rpx;
			}

			.i_memo {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.im_left {
					display: flex;
					align-items: center;

					.iml_box {
						width: 60rpx;
						height: 36rpx;
						background: #B2D7D2;
						border-radius: 6rpx;
						line-height: 36rpx;
						text-align: center;
						font-size: 20rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #007A69;
					}

					.iml_text {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #B2D7D2;
						margin-left: 15rpx;
						display: flex;
					}
				}

				.im_right {
					display: flex;
					align-items: center;

					.imr_img1 {
						width: 26rpx;
						height: 26rpx;
					}

					text {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFE765;
						margin-left: 6rpx;
					}

					.imr_img2 {
						width: 24rpx;
						height: 24rpx;
					}
				}
			}
		}
		
		.notice_info{
			width: 100%;
			padding: 20rpx 24rpx;
			box-sizing: border-box;
			background: #FFFDF7;
			display: flex;
			align-items: flex-start;
			margin-top: -20rpx;
			text{
				padding-left: 8rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #FEA400;
				line-height: 33rpx;
			}
		}
		
		.passenger {
			padding: 40rpx 24rpx;
			background: #fff;
			border-radius: 16rpx 16rpx 0rpx 0rpx;

			.p_title {
				display: flex;
				align-items: center;
				text{
					font-size: 32rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #111111;
				}
				span{
					margin-left: 6rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					line-height: 24rpx;
				}
			}

			.p_add {
				margin-top: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				// border-radius: 16rpx;
				background-image: url('https://i.ringzle.com/file/20240415/5d72e22d58744b9bb740a3333d3d2b42.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				padding: 16rpx;

				image {
					width: 26rpx;
					height: 26rpx;
				}

				text {
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: bold;
					color: #007A69;
					margin-left: 8rpx;
				}
			}
		}

		.contacts {
			margin-top: 20rpx;

			.c_info {
				padding: 40rpx 24rpx 28rpx;
				background: #fff;
				border-radius: 16rpx;

				&>text {
					font-size: 32rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #111111;
				}

				.ci_inp {
					display: flex;
					align-items: center;
					justify-content: space-between;

					&.mt48 {
						margin-top: 48rpx;
					}

					text {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: Regular;
						color: #111111;
					}

					input {
						border: none;
						outline: none;
						text-align: right;
						font-size: 28rpx;

						&::placeholder {
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: Regular;
							color: #AAAAAA;
						}
					}

					image {
						margin-left: 36rpx;
						width: 36rpx;
						height: 36rpx;
					}
				}

				.ci_line {
					height: 1rpx;
					background: #EFEFEF;
					margin: 28rpx 0;
				}
			}

			.c_memo {
				background: #FFF9F4;
				border-radius: 0rpx 0rpx 16rpx 16rpx;
				padding: 24rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FF7D01;
			}
		}

		.agree {
			// position: absolute;
			// bottom: 120rpx;
			display: flex;
			align-items: center;
			padding: 51rpx 0 51rpx;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 16rpx;
			}

			text {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;

				&:last-child {
					color: #007A69;
					margin-left: 10rpx;
				}
			}
		}

		.bottom {
			position: fixed;
			bottom: 0;
			left: 0;
			width: calc(100% - 60rpx);
			background: #fff;
			box-shadow: 0rpx -1rpx 8rpx 0rpx rgba(0, 0, 0, 0.06);
			padding: 16rpx 30rpx 36rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			z-index: 9;

			.b_left {
				display: flex;
				align-items: center;

				&>text {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}

				&>view {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FF4141;
					margin-left: 16rpx;

					span {
						font-size: 48rpx;
						font-family: DINAlternate-Bold, DINAlternate;
						font-weight: bold;
						color: #FF4141;
					}
				}
			}

			.b_right {
				display: flex;
				align-items: center;

				.br_left {
					display: flex;
					align-items: center;

					text {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
					}

					image {
						width: 24rpx;
						height: 24rpx;
						margin-left: 8rpx;
					}
				}

				.br_right {
					width: 220rpx;
					height: 80rpx;
					// background: linear-gradient(90deg, #FF7D43 0%, #FEAC2C 100%);
					background-color: #007A69;
					border-radius: 40rpx;
					line-height: 80rpx;
					text-align: center;
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					margin-left: 24rpx;
				}
			}
		}

		.details {
			padding: 40rpx 30rpx 200rpx;
			min-height: 400rpx;

			.title {
				position: relative;
				text-align: center;

				text {
					font-size: 36rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
				}

				image {
					width: 36rpx;
					height: 36rpx;
					position: absolute;
					right: 10rpx;
					top: 50%;
					margin-top: -18rpx;
				}
			}

			.address {
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
				margin-top: 48rpx;
			}

			.tickets {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 42rpx;

				&>text {
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #777777;
				}

				&>view {
					font-size: 28rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;

					span {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #777777;
					}
				}
			}

			.total {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 61rpx;

				text {
					font-size: 32rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
				}

				view {
					height: 36rpx;
					font-size: 32rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
				}
			}

			.d_middle {
				padding: 40rpx 0 0rpx;
				max-height: 550rpx;
				overflow-y: auto;

				&>view {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 30rpx 0;

					&:first-child {
						border-top: 1rpx solid #EFEFEF;
					}

					&>text {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
					}

					&>view {
						font-size: 30rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #333333;
						display: flex;
						align-items: center;

						span {
							font-size: 26rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #777777;
							margin-left: 10rpx;
						}
					}
				}
			}

			.has_info {
				.add_user {
					height: 88rpx;
					border-radius: 16rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background: #fff;
					margin-top: 48rpx;
					background-image: url('https://i.ringzle.com/file/20240415/5d72e22d58744b9bb740a3333d3d2b42.png');
					background-repeat: no-repeat;
					background-size: 100% 100%;



					image {
						width: 26rpx;
						height: 26rpx;
						margin-right: 12rpx;
					}

					text {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: bold;
						color: #007A69;
						margin-left: 12rpx;
						letter-spacing: 2rpx;
					}
				}

				.add_list {
					padding-top: 30rpx;
					max-height: 478rpx;
					overflow-y: auto;

					.sac_item {
						display: flex;
						align-items: center;
						padding: 36rpx 24rpx;

						.chk {
							width: 38rpx;
							height: 38rpx;
						}

						.si_info {
							width: calc(100% - 96rpx);
							padding-left: 22rpx;

							.name {
								display: flex;
								align-items: center;

								view:first-child {
									font-size: 32rpx;
									font-family: PingFang-SC-Bold, PingFang-SC;
									font-weight: bold;
									color: #111111;
									line-height: 32rpx;
								}

								view:last-child {
									padding: 3px 4px;
									line-height: 24rpx;
									text-align: center;
									background: #F5F8FA;
									border-radius: 8rpx;
									font-size: 24rpx;
									font-family: PingFangSC-Regular, PingFang SC;
									font-weight: 400;
									color: #94A9C8;
									margin: 5rpx 0 0 28rpx;
								}
							}

							.idcard {
								margin-top: 20rpx;

								&>text {
									font-size: 24rpx;
									font-family: PingFangSC-Regular, PingFang SC;
									font-weight: 400;
									color: #111111;
									line-height: 24rpx;

									&:first-child {
										color: #AAAAAA;
										margin-right: 10rpx;
									}
								}
							}
						}

						.edit {
							width: 36rpx;
							height: 36rpx;
						}
					}
				}
			}

			.add_submit {
				width: calc(100% - 60rpx);
				height: 88rpx;
				background: #007A69;
				border-radius: 44rpx;
				position: fixed;
				bottom: 69rpx;
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 88rpx;
				text-align: center;
			}
		}

		.passengers {
			.p_item_new{
				margin-top: 32rpx;
				.pin_top{
					display: flex;
					align-items: center;
					.p_del{
						width: 36rpx;
						height: 36rpx;
					}
					.pint_right{
						width: calc(100% - 36rpx);
						padding-left: 20rpx;
						box-sizing: border-box;
						.pintr_info{
							display: flex;
							align-items: center;
							.name{
								font-family: PingFang-SC, PingFang-SC;
								font-weight: bold;
								font-size: 30rpx;
								color: #333333;
								line-height: 32rpx;
							}
							.card{
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #999999;
								line-height: 24rpx;
								margin-left: 16rpx;
							}
							.type{
								width: 82rpx;
								height: 32rpx;
								background: rgba(0,122,105,0.05);
								border-radius: 8rpx;
								line-height: 32rpx;
								text-align: center;
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 22rpx;
								color: #94A9C8;
								margin-left: 8rpx;
							}
						}
						.pintr_add{
							margin-top: 32rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							text{
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 28rpx;
								color: #333333;
								line-height: 28rpx;
							}
							.add{
								display: flex;
								align-items: end;
								span{
									color: #007A69;
									font-size: 22rpx;
								}
								text{
									font-family: PingFang-SC, PingFang-SC;
									font-weight: bold;
									font-size: 26rpx;
									color: #007A69;
									line-height: 26rpx;
								}
							}
						}
					}
				}
				
				.pin_childs{
					margin-top: 32rpx;
					width: 100%;
					padding: 24rpx 20rpx;
					box-sizing: border-box;
					background: #F4F9F8;
					.pc_item{
						margin-top: 24rpx;
						display: flex;
						align-items: center;
						&:first-child{
							margin-top: 0;
						}
						.title{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 20rpx;
							color: #999999;
							line-height: 24rpx;
						}
						.name{
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #666666;
							line-height: 32rpx;
							margin-left: 19rpx;
						}
						.card{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
							line-height: 24rpx;
							margin-left: 16rpx;
						}
						.type{
							width: 92rpx;
							height: 32rpx;
							background: rgba(0,122,105,0.05);
							border-radius: 8rpx;
							margin-left: 12rpx;
							line-height: 32rpx;
							text-align: center;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 20rpx;
							color: #94A9C8;
						}
					}
				}
			}
		}

		.local_box {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background: rgba(0, 0, 0, .2);
			z-index: 99999;
			display: flex;
			align-items: center;
			justify-content: center;

			.lb_content {
				width: calc(100% - 146rpx);
				background: url(https://i.ringzle.com/file/20240429/9ca472b33c094035a1d7a00f110ac59d.png) no-repeat;
				background-size: 100% 100%;
				border-radius: 24rpx;
				padding: 143rpx 38rpx 44rpx;
				box-sizing: border-box;
				position: relative;
				z-index: 11;

				.lbc_tip {
					text-align: center;
					font-size: 30rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 48rpx;
				}

				.lbc_btn {
					width: calc(100% - 48rpx);
					height: 88rpx;
					background: #007A69;
					box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(13, 191, 253, 0.3);
					border-radius: 44rpx;
					line-height: 88rpx;
					text-align: center;
					font-size: 32rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					color: #FFFFFF;
					letter-spacing: 2rpx;
					margin: 63rpx 24rpx 0;
				}
				
				.lbc_btns{
					width: calc(100% - 76rpx);
					height: 88rpx;
					margin: 63rpx 38rpx 0;
					display: flex;
					justify-content: space-between;
					&>view{
						width: calc(50% - 14rpx);
						height: 100%;
						border-radius: 44rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 32rpx;
						&.lb_qx{
							border: 1rpx solid #007A69;
							color: #007A69;
						}
						&.lb_qd{
							background: #007A69;
							color: #FFFFFF;
						}
					}
				}

				image {
					width: 255rpx;
					height: 168rpx;
					position: absolute;
					left: 50%;
					margin-left: -127.5rpx;
					top: -60rpx;
					z-index: 12;
				}
			}
		}
	}
</style>
<style>
	.u-swipe-action-item__right__button__wrapper {
		background: #F55454 !important;
		font-size: 32rpx;
		font-family: PingFang-SC-Bold, PingFang-SC;
		font-weight: bold;
		color: #FFFFFF;
		letter-spacing: 2rpx;
	}
</style>